<!--
 * @Descripttion: 
 * @version: 
 * @Author: wishchan
 * @Date: 2021-12-09 15:15:59
 * @LastEditors: 川杨
 * @LastEditTime: 2022-01-11 13:45:18
-->
<template>
  <div class="business-chart">
    <div class="business-chart-tab">
      <div class="stats-btn-group">
        <button 
          type="button" 
          :class="{'stats-checked': chartType == 'plan-a'}" 
          @click="chooseChart('plan-a')">
          {{ $t('report.personnelPerformanceChart.comprehensiveScore') }}
          <el-tooltip :content="$t('report.personnelPerformanceChart.scoreTip')" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
        </button>
        <button 
          type="button" 
          :class="{'stats-checked': chartType == 'plan-b'}" 
          @click="chooseChart('plan-b')">
          {{ $t('task.list.displayName.serviceEfficiency') }}
          <el-tooltip :content="$t('report.personnelPerformanceChart.serviceEfficiencyTip')" placement="top">
            <i class="el-icon-question"></i>
          </el-tooltip>
      </button></div>
      <el-button class="business-export-btn" type='primary' @click="handlerExportClick" :loading="exportLoading">
        {{ $t('common.base.export') }}
      </el-button>
    </div>
    <bar-chart :chart-data="chartData" v-loading="loading"></bar-chart>
  </div>
</template>
<script>
import BarChart from './BarChart.vue'
export default {
  name: 'personnel-performance-chart',
  components:{
    [BarChart.name]:BarChart
  },
  props:{
    exportLoading:{
      type:Boolean,
      default:false
    },
    loading:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      chartType:'plan-a',
      chartData:{}
    }
  },
  created() {
  },
  methods: {
    handlerExportClick(){
      this.$emit('export')
    },
    chooseChart(type){
      this.chartType = type
      this.$emit('change-type', type)
    },
    init(data, haveUsers){
      this.getChartData(data, haveUsers)
    },
    getTooltips(data, index, seriesIndex){
      if(this.chartType == 'plan-a'){
        return `
          <div class="tooltipTitle">${data[index].personnelPerformanceInfoDataAs[seriesIndex].userName || this.$t('common.base.tip.noStaff')}</div>
          <div class="tooltipTitle">${this.$t('report.personnelPerformanceChart.comprehensiveScore')}：${data[index].personnelPerformanceInfoDataAs[seriesIndex].comprehensiveScore}${this.$t('common.base.minute')}</div>
          <br>
          <div class="tooltipDetail">${this.$t('report.personnelPerformanceChart.technicalDifficulty')}：${data[index].personnelPerformanceInfoDataAs[seriesIndex].technicalDifficulty}${this.$t('common.base.minute')}</div>
          <div class="tooltipDetail">${this.$t('report.personnelPerformanceChart.workEfficiency')}：${data[index].personnelPerformanceInfoDataAs[seriesIndex].workEfficiency}${this.$t('common.base.minute')}</div>
          <div class="tooltipDetail">${this.$t('report.personnelPerformanceChart.repairRate')}：${data[index].personnelPerformanceInfoDataAs[seriesIndex].repairRate}${this.$t('common.base.minute')}</div>
          <div class="tooltipDetail">${this.$t('report.personnelPerformanceChart.customerCooperation')}：${data[index].personnelPerformanceInfoDataAs[seriesIndex].customerCooperation}${this.$t('common.base.minute')}</div>
          <div class="tooltipDetail">${this.$t('common.customer.questionnaire.customerSatisfaction')}：${data[index].personnelPerformanceInfoDataAs[seriesIndex].customerSatisfaction}${this.$t('common.base.minute')}</div>
        `
      }
      return `
          <div class="tooltipTitle">${data[index].personnelPerformanceInfoDataBs[seriesIndex].userName || this.$t('common.base.tip.noStaff')}</div>
          <div class="tooltipTitle">${this.$t('task.list.displayName.serviceEfficiency')}：${data[index].personnelPerformanceInfoDataBs[seriesIndex].comprehensiveScore}%</div>
          <div class="tooltipTitle">${this.$t('report.personnelPerformanceChart.fitAnomaly')}：${data[index].personnelPerformanceInfoDataBs[seriesIndex].coordinationAbnormality}%</div>
          <div class="tooltipTitle">${this.$t('frameHeader.tabMap.rateOfProduction')}：${data[index].personnelPerformanceInfoDataBs[seriesIndex].workRate}%</div>
          <div class="tooltipTitle">${this.$t('report.personnelPerformanceChart.planSucRate')}：${data[index].personnelPerformanceInfoDataBs[seriesIndex].planAchievementRate}%</div>
          <div class="tooltipTitle">${this.$t('report.personnelPerformanceChart.repairRate')}：${data[index].personnelPerformanceInfoDataBs[seriesIndex].repairTimes}%</div>
          <div class="tooltipTitle">${this.$t('report.personnelPerformanceChart.complaintsNum')}：${data[index].personnelPerformanceInfoDataBs[seriesIndex].numberOfComplaints}%</div>
          <div class="tooltipTitle">${this.$t('report.personnelPerformanceChart.errorLog')}：${data[index].personnelPerformanceInfoDataBs[seriesIndex].attendanceErrorLog}%</div>
        `
      
    },
    getChartData(data, haveUsers) {
      if(!data)data = [];
      let that = this
      let originData = data[0] ? (this.chartType == 'plan-a' ? data[0].personnelPerformanceInfoDataAs : data[0].personnelPerformanceInfoDataBs) : []
      // originData = originData.filter(item=>item.userName)
      let series = []
      // if(haveUsers){
      //   series = (originData || []).map(item=>{
      //     return {type:'bar', name:item.userName,
      //       label: {
      //         show: true, // 开启显示
      //         position: 'top', // 在上方显示
      //         textStyle: { // 数值样式
      //           color: 'auto',
      //           fontSize: 16
      //         }
      //       }
      //     }
      //   })
      // }else{
      //   let example = {type:'bar',
      //     label: {
      //       show: true, // 开启显示
      //       position: 'top', // 在上方显示
      //       textStyle: { // 数值样式
      //         color: 'auto',
      //         fontSize: 16
      //       }}
      //   }
      //   series = [example]
      // }
      series = (originData || []).map(item=>{
        return {
          type:'bar', 
          name:item.userName,
          label: {
            show: true, // 开启显示
            position: 'top', // 在上方显示
            color: 'auto',
            fontSize: 16,
            ...(this.chartType == 'plan-a' ? {} : {
              formatter: (params) => {
                const { value, seriesIndex } = params;
                return `${value[seriesIndex + 1]}%`;
              },
            })
            
          }
        }
      })
      let dataSource = []
      data.forEach(item=>{
        let oneData = [item.date];
        series.forEach((element, index) => {
          oneData.push(this.chartType == 'plan-a' ? (item.personnelPerformanceInfoDataAs[index] ? item.personnelPerformanceInfoDataAs[index].comprehensiveScore : 0) : (item.personnelPerformanceInfoDataBs[index] ? item.personnelPerformanceInfoDataBs[index].comprehensiveScore : 0))
          // if(haveUsers || (!haveUsers && ((this.chartType == 'plan-a' && item.personnelPerformanceInfoDataAs[index].userName) || (this.chartType == 'plan-b' && item.personnelPerformanceInfoDataBs[index].userName)))){
          // }
        });
        dataSource.push(oneData)
      })
      if(dataSource.length == 0){
        return this.chartData = {}
      }
      this.chartData = {
        legend: {
          show: true,
          type:'scroll'
        },
        tooltip: {
          triggerOn:'mousemove',
          enterable:true,
          formatter: params => {
            return that.getTooltips(data, params.dataIndex, params.seriesIndex)
          }
        },
        dataset: {
          source:dataSource
        },
        xAxis: { type: 'category' },
        yAxis: {
          min: 0,
          ...(this.chartType == 'plan-a' ? {} : {axisLabel: {
            formatter: "{value}%",
          }})
        },
        series,
        dataZoom: [
          (data.length * series.length) > 30 ? {
            type: 'slider',
            show: true,
            start:1, // 数据窗口范围的起始百分比,表示1%
            end:50,
            xAxisIndex: 0,
            bottom:'10px'
          } : {
            type: 'slider',
            show: false,
            start:1, // 数据窗口范围的起始百分比,表示1%
            end:100,
            xAxisIndex: 0,
            bottom:'10px'
          }]
      };
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../business.scss';
.tooltipTitle{
  color:$color-primary-light-6;
  font-size:14px;
}
.tooltipDetail{
  color:orange;
  font-size:12px;
}
</style>
<style lang="scss">
.business-chart{
  .tooltipTitle{
    color:$color-primary-light-6;
    font-size:14px;
  }
  .tooltipDetail{
    color:orange;
    font-size:12px;
  } 
}
</style>